<!DOCTYPE html>
<html>
<head>
    <title>欢迎页</title>
    #parse("sys/header.html")
    <meta charset="utf-8">
    <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body style="background-color: #f3f3f4;">


<div class="row">
    <div class="col-sm-3">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <span class="label label-success pull-right">最近一个月</span>
                <h5>累计充值</h5>
            </div>
            <div class="ibox-content">
                <h1 class="no-margins" id="czAmount">0</h1>
                <small>会员总充值</small>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <span class="label label-danger pull-right">最近一个月</span>
                <h5>累计消费</h5>
            </div>
            <div class="ibox-content">
                <h1 class="no-margins" id="xfAmount">0</h1>
                <small>会员总消费</small>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <span class="label label-primary pull-right">今天</span>
                <h5>订单</h5>
            </div>
            <div class="ibox-content">
                <h1 class="no-margins" id="countorder">0</h1>
                <small>新订单</small>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <span class="label label-primary pull-right">今天</span>
                <h5>新用户</h5>
            </div>
            <div class="ibox-content">
                <h1 class="no-margins" id="countuser">0</h1>
                <small>新注册用户（会员、主播）</small>
            </div>
        </div>
    </div>

    <div class="col-sm-12" style="padding-top: 50px;">
        <div id="container" style="min-width:400px;height:400px"></div>
    </div>

</div>


<script>
    var chart = null;
    $.getJSON('../extend/highchart', function (csv) {
        chart = Highcharts.chart('container', {
            chart: {
                type: 'spline'
            },
            title: {
                text: '充值和消费近18天记录'
            },
            subtitle: {
                text: '实时数据统计'
            },
            xAxis: {
                categories: csv.re_map.categories
            },
            yAxis: {
                title: {
                    text: '窝币'
                },
                labels: {
                    formatter: function () {
                        return this.value + '元';
                    }
                }
            },
            tooltip: {
                crosshairs: true,
                shared: true
            },
            plotOptions: {
                spline: {
                    marker: {
                        radius: 2,
                        lineColor: '#666666',
                        lineWidth: 1
                    }
                }
            },
            series: [{
                name: '充值',
                marker: {
                    symbol: 'square'
                },
                data: csv.re_map.series
            }, {
                name: '消费',
                marker: {
                    symbol: 'diamond'
                },
                data: csv.re_map.series2
            }]
        })
    });

    $.getJSON('../extend/index', function (csv) {
        $("#czAmount").text(csv.re_map.czAmount);
        $("#xfAmount").text(csv.re_map.xfAmount);
        $("#countorder").text(csv.re_map.countorder);
        $("#countuser").text(csv.re_map.countuser);
    });

</script>
</body>

</html>